<template>
  <div>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      />
    </el-tabs>
    <div class="container">
      <el-row>
        <el-col :span="5">
          <el-input
            v-model="searchStr"
            size="small"
            placeholder="商品名称/货号"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            />
          </el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-cascader
            v-model="kind"
            size="small"
            :options="kindList"
            :props="casProps"
            expand-trigger="hover"
            clearable
          />
        </el-col>
        <el-col style="text-align:right;" :span="14" />
      </el-row>
      <el-table
        ref="multipleTable"
        :data="goodList"
        tooltip-effect="dark"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="货号" prop="item_no" width="150" />
        <el-table-column label="图片" width="100" align="center">
          <template slot-scope="scope">
            <img
              style="width:50px;height:50px;"
              :src="scope.row.img_show"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column label="库存" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                detailVisible = true;
                currentId = scope.row.id;
              "
            >{{ scope.row.inventory }}</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="
                changeVisible = true;
                currentId = scope.row.id;
                type = 'in';
              "
            >入库</el-button>
            <el-button
              size="small"
              @click="
                changeVisible = true;
                currentId = scope.row.id;
                type = 'out';
              "
            >出库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom-bar">
        <div />
        <el-pagination
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <change-inventory
      :id="currentId"
      :visible="changeVisible"
      :type="type"
      @close="
        changeVisible = false;
        getInventoryList(page, tabName);
      "
    />
    <inventory-detail
      :id="currentId"
      :visible="detailVisible"
      @close="detailVisible = false"
    />
  </div>
</template>

<script>
import changeInventory from './component/change-inventory'
import inventoryDetail from './component/inventory-detail'
import { getInventoryList, getPropClassList } from '@/api/good-mng'
export default {
  name: 'InventoryMng',
  components: {
    changeInventory,
    inventoryDetail
  },
  data() {
    return {
      tabList: [
        {
          name: '所有商品',
          id: '1'
        },
        {
          name: '库存预警',
          id: '2'
        }
      ],
      tabName: '1',
      casProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        value: 'id',
        label: 'kind_name',
        children: 'lower'
      },
      kindList: [],
      kind: [],
      goodList: [],
      searchStr: '',
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      editVisible: false,
      changeVisible: false,
      detailVisible: false,
      currentId: null,
      type: 'in'
    }
  },
  watch: {
    tabName: function(val) {
      this.searchStr = ''
      this.goodList = []
      this.getInventoryList(1, val)
    },
    kind: function(val) {
      this.getInventoryList(1, this.tabName)
    }
  },
  created() {
    this.getInventoryList(1, this.tabName)
    this.changeSize()
    getPropClassList().then(res => {
      if (res.code === 200) {
        this.kindList = res.data
      }
    })
  },
  methods: {
    search() {
      this.getInventoryList(1, this.tabName)
    },
    getInventoryList(page, type) {
      getInventoryList({
        page,
        condition: this.searchStr ? this.searchStr : null,
        kind: this.kind[1] ? this.kind[1] : null
      }).then(res => {
        if (res.code === 200) {
          this.goodList = res.data.data
          this.total = res.data.total
          this.page = res.data.current_page
          this.size = res.data.per_page
        }
      })
    },
    handleCurrentChange(page) {
      this.getInventoryList(page, this.tabName)
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 240
      window.onresize = () => {
        this.changeSize()
      }
    }
  }
}
</script>

<style>
</style>
